<template>
  <van-nav-bar
    title="购物车"
    left-text="返回"
    left-arrow
    @click-left="$router.back()"
  />

  <van-submit-bar :price="0" button-text="提交订单">
  <van-checkbox >全选</van-checkbox>
</van-submit-bar>

  <van-pull-refresh title="购物车"
  class="goods-refresh"
      v-model="refreshLoading"
      @refresh="onRefresh"
  >
    <div class="cart"></div>
  </van-pull-refresh>
  <van-pull-refresh
      class="goods-refresh"
      v-model="refreshLoading"
      @refresh="onRefresh"
    >
      <div class="goods-list">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          class="goods-item"
        >
          <van-cell
            v-for="item in productList"
            :key="item.proid"
            @click="goToDetail(item.proid)"
          >
            <div class="item-imgbox">
              <img :src="item.img1" alt="" />
            </div>
            <div>
              <p>{{ item.proname }}</p>
              <p>￥{{ item.originprice }}</p>
            </div>
          </van-cell>
        </van-list>
      </div>
    </van-pull-refresh>
</template>

<script setup lang="ts">
  import {
    useProductList,
  } from "@/hooks/HomeViewHook";
  
  const {
    refreshLoading,
    onRefresh,
    loading,
    finished,
    onLoad,
    productList,
    goToDetail,
  } = useProductList();
  </script>

<style lang="scss" scoped>
.cart{
  height: 400px;
  background-color: gainsboro;
}
.goods-refresh {
    overflow: inherit;
    .goods-list {
      width: 100%;
      .goods-item {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        width: 100%;
        margin: 10px;
        border-radius: 10px;
        margin: 8px 0;
        overflow: hidden;
        .van-cell {
          width: 48%;
          margin-top: 10px;
        }
        .item-imgbox {
          width: 100%;
          img {
            display: block;
            width: 100%;
          }
        }
      }
    }
  }
  
</style>